/*
 *		
 * Author:	matao
 * Date:	2011-9-10			
*/

(function (){
    /**
     * constructor for Panel
     */
	var uid = 0;
	function Panel(wrapperId){
        var utils = Panel.Utils;
        
	    this.uid = ++uid;
        this.wrapper = utils.$(wrapperId);
        this.svg = new Panel.SVG(this);
        this.menubar = new Panel.Menubar(this);
        this.statebar = new Panel.Statebar(this);

        this.render().dispatchEvent();
	}

    Panel.prototype = {
        NS: 'http://www.w3.org/2000/svg',
		MenuSet: {
			//填充颜色
			fillColor: [
				{value: '#fff', text: 'white', selected: 1},
				{value: '#000', text: 'black'},
                {value: '#f50', text: 'orange'}
			],
			//笔触颜色
			strokeColor: [
				{value: '#fff', text: 'black', selected: 1},
				{value: '#000', text: 'white'}
			],
			//边框宽度
			strokeWidth: [
				{value: '1', text: '1', selected: 1},
				{value: '2', text: '2'},
				{value: '3', text: '3'}
			],
			//边框类型
			strokeDasharray: [
				{value: '1', text: '1', selected: 1},
				{value: '2', text: '2'},
				{value: '3', text: '3'}
			],
			//形状类型
			shapeType: [
				{value: 'default', text:'默认', selected: 1}
			]
		},

        /**
         * create SVGElement and append to wrapper
         */
        render: function(){
            if(!this.wrapper){
                throw new Error('no wrapper found!');
            }
            else{
                var cols = ['svg', 'menubar', 'statebar'],
                    frag = document.createDocumentFragment(),
                    temp = null,
					i = cols.length;
                
                while(i--){
                    if(temp = this[cols[i]].dom){
                        frag.appendChild(temp);
                    }
                    else{
                        throw new Error('can not create ' + cols[i]);
                    }
                }
                this.wrapper.appendChild(frag);
                frag = temp = null;
            }

            return this;
        },

        /**
         * show default info on statebar
         * @param evt
         * @param panel
         */
        defaultStatebarInfoHandle: function(evt, panel){
            if(evt.type == 'mouseout'){
                panel.statebar.clear();
            }
            else{
                var ele = evt.target,
                    svg = panel.svg,
                    offset = svg.offset ? svg.offset : svg.offset = ele.getBoundingClientRect(),
                    posX = evt.clientX - offset.left,
                    posY = evt.clientY - offset.top - (svg.topPad ? svg.topPad : svg.topPad = panel.menubar.dom.offsetHeight);

                panel.statebar.showInfo('(' + posX + ', ' + posY + ')');
            }
        },

        dispatchEvent: function(){
            var utils = Panel.Utils,
                svg = this.svg;

            utils.addEvent(svg.dom, 'mousemove', this.defaultStatebarInfoHandle);
            utils.addEvent(svg.dom, 'mouseout', this.defaultStatebarInfoHandle);
        }

    };

	window.Panel = Panel;
})();